<template>
	<!-- 健康码首页 -->
	<view class="safe-nav-top">
		<u-navbar
			title="健康码(学习交流)" 
			leftIcon="" fixed
		>
		</u-navbar>
		<u-notice-bar text="健康码(仅供学习交流)" bgColor="#f9eaea" color="#ff6162"></u-notice-bar>
		
		<div class="content">
			<!-- 顶部小块背景 -->
			<div class="top-bg">
			</div>
			
			<!-- 页面内容 -->
			<div class="inner-content">
				<div v-if="userInfo" style="color: #FFFFFF;font-size: 36rpx;margin-bottom: 24rpx;">
					姓名： {{userInfo.nickname}}
				</div>
				
				<!-- 二维码区域，两种状态，未申领前和申领前-->
				<div class="code-box light-shadow">
					<!-- 二维码 -->
					<div v-if="codeApplyState" style="padding: 48rpx 0;text-align: center;">
						<div :style="{'color': codeInfo.color}" style="margin-bottom: 24rpx;font-weight: bold;">{{codeInfo.name}}</div>
						<div style="text-align: center;" :key="qrcodeKey">
							<tki-qrcode
							    ref="healthCode"
							    cid="healthCode"
							    val="hello,zsq"
								:foreground="codeInfo.color"
								:pdground="codeInfo.color"
							    :size="320"
							    :onval="true"
							    :loadMake="true"
							/>
						</div>
						<div style="text-align: center;margin-top: 24rpx;justify-content: center;" class="flex">
							<text style="font-size: 48rpx;font-weight: bold;">{{codeInfo.tips}}</text>
							<u-icon name="edit-pen" size="28" @click="toCodeApply"/>
						</div>
					</div>
					
					<!-- 健康码申领 -->
					<div v-else>
						<div style="height: 48rpx;"></div>
						<u-divider />
						<div style="color: #666666;padding: 24rpx;">
							<text>根据xxx要求，请严格执行亮码出行制度，统一使用健康码进行出入管理</text>
							<u-button style="margin-top: 24rpx;" type="primary" plain @click="toCodeApply">健康码申领</u-button>
						</div>
					</div>
				</div>
				
				<!-- 底部功能按钮区域 -->
				<div style="margin-top: 24rpx;">
					<div 
						v-if="myPlaceList && myPlaceList.length > 0"
						class="flex flex-center white-box light-shadow" 
						@click="toPages('/pages/regPlace/myPlaceList/myPlaceList')"
					>
						<u-icon name="file-text-fill" color="#27cabf" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">已注册场所({{myPlaceList.length}})</text>
					</div>
					
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="map-fill" color="#33c2a6" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">通信行程卡</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="edit-pen-fill" color="#35b6f0" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">疫苗接种预约</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="file-text-fill" color="#35b6f0" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">疫苗接种记录</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="file-text-fill" color="#ffb935" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">核酸检测报告</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="email-fill" color="#ff7975" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">异常反馈</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="bell-fill" color="#ffbd38" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">通知公告</text>
					</div>
					<div class="flex flex-center white-box light-shadow">
						<u-icon name="question-circle-fill" color="#ff7976" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">常见问题</text>
					</div>
					<div class="flex flex-center white-box light-shadow" @click="toPages('/pages/regPlace/regPlace?operType=add')">
						<u-icon name="file-text-fill" color="#27cabf" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">场所注册</text>
					</div>
					
					<div class="flex flex-center white-box light-shadow" @click="onClickLogout">
						<u-icon name="play-left" color="#ff7975" size="40"/> 
						<text style="margin-left: 24rpx; font-size: 36rpx;">注销登录</text>
					</div>
				</div>
				
				<PageFooter/>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	import {hasLogin} from '@/utils/authUtils.js';
	import PageFooter from '@/components/layout/PageFooter.vue';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import {mapState, mapActions, mapMutations} from 'vuex';
	
	// 健康码状态信息
	const codeState = {
		// 绿码
		1: {
			name: '绿码',
			color: '#37b44a',
		},
		// 黄码
		2: {
			name: '黄码',
			color: '#fad81e',
		},
		// 红码
		3: {
			name: '红码',
			color: '#f34334',
		},
	};
	
	export default {
		components: {
			PageFooter, tkiQrcode
		},
		data() {
			return {
				// 二维码key，辅助刷新控件
				qrcodeKey: "qrcodeKey",
				// 申领状态
				codeApplyState: false,
				// 健康码信息
				myHealthCode: null,
				// 已注册的场所
				myPlaceList: [],
			}
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo',
			}),
			// 健康码类型
			codeInfo(){
				let {myHealthCode} = this;
				if (myHealthCode) {
					return {
						... myHealthCode,
						// 是否可通行 提示文字
						tips: myHealthCode.state === 1 ? '可正常通行' : '禁止通行!',
						// 颜色
						color: codeState[myHealthCode.state].color,
						name: codeState[myHealthCode.state].name,
					};
				}
			},
		},
		onLoad() {
			// 检查是否已经登录
			if (!hasLogin()) {
				// 未登录，跳转至注册首页
				uni.redirectTo({
					url: '/pages/index/index'
				});
			};
		},
		onReady(){
		},
		onShow(){
			this.getHalthCode();
			this.getMyPlaceList();
		},
		methods: {
			...mapActions('user', {
				logout: 'logout',
			}),
			// 获取当前用户的健康码记录
			getHalthCode(){
				this.$api.healthCode.myHealthCode().then(({data}) => {
					if (data) {
						this.myHealthCode = data;
						this.codeApplyState = true;
						this.qrcodeKey = "key-" + Date.now();
					} else {
						console.log("未申领健康码");
					}
				});
			},
			// 获取已注册的场所
			getMyPlaceList(){
				this.$api.codePlace.myPlaceList().then(({data}) => {
					this.myPlaceList = data;
				});
			},
			/**
			 * 点击注销登录
			 */
			onClickLogout(){
				this.logout().then(()=>{
					uni.redirectTo({
						url: '/pages/index/index'
					});
				});
			},
			// 前往健康码申领页面
			toCodeApply(){
				uni.navigateTo({
					url: '/pages/codeApply/codeApply'
				})
			},
			toPages(url){
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped>
	
	/* 内容 */
	.content{
		position: relative;
	}
	/* 小块背景 */
	.content .top-bg{
		width: 100%;
		height: 300rpx;
		background-color: #4798ed;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.content .inner-content{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 24rpx;
	}
	
	.content .code-box{
		width: 100%;
		min-height: 420rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	
	
</style>
